<template>
  <div>
    <mheader></mheader>
    <div>
      <mnavi></mnavi>
    </div>
    <div class="container">
      <Row type="flex" justify="center">
        <Col span="17">
        <ul>
          <li v-for="item in items" style="float:left;">
            <mlbox :item="item"></mlbox>
          </li>
        </ul>
        </Col>
      </Row>
      <Row type="flex" justify="end">
        <Col span="8">
          <Page :total="total" :current="current" @on-change="changePage"></Page>
        </Col>
      </Row>
    </div>

    <mfooter></mfooter>
  </div>
</template>

<style lang="css" scoped>
  .container {
    margin: 30px 0px;
  }
</style>

<script>
  import mtag from "@/components/mtag";
  import mlbox from "@/components/mlbox";
  import mnavi from "@/components/mnavi";
  import mheader from "@/components/mheader";
  import mfooter from "@/components/mfooter";

  export default {
    name: "List",
    components: {
      mtag,
      mlbox,
      mnavi,
      mheader,
      mfooter
    },
    data() {
      return {
        limit: 0,
        page: 0,
        current: 0,
        total: 0,
        type: '',
        items: []
      };
    },
    methods: {
      init(type) {
        this.limit = 8;
        this.page = 0;
        this.current = 1;
        this.total = 100;
        this.type = type;
        this.mockListData(1);
      },
      mockListData(init) {
        this.$axios({
          method: 'get',
          url: '/api/concert',
          params: {
            type: this.type,
            page: this.page,
            limit: this.limit,
            init: init,
          }
        }).then((res) => {
          this.total = res.data.request.total;
          this.items = res.data.result;
        }).catch((error) => {
          console.log(error);
        });
      },
      changePage(index) {
        // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
        this.page = index;
        this.mockListData(1);
      },
    },
    mounted() {
      const type = this.$route.params.type;
      this.init(type);
    },
    beforeRouteUpdate(to, from, next) {
      // react to route changes...
      // don't forget to call next()
      next();
      const type = this.$route.params.type;
      this.init(type);
    }
  };
</script>
